<template>
  <div>
    <MyNavcomponent title="个人中心" />
    <div class="personalImg">
      <!-- <van-image round width="7rem" height="7rem" :src="personInformation.avatar" />
      <br />-->
      <van-uploader :afterRead="avatarAfterRead">
        <div class="user_avatar_upload">
          <img :src="personInformation.avatar" alt="你的头像" v-if="personInformation.avatar" />
          <van-icon name="camera_full" v-else></van-icon>
        </div>
         <!-- <img :src="file.content" alt="你的头像" v-if="file.content" /> -->
      </van-uploader>
      <!-- <br> -->
      <p>点击头像上传图片</p>
      <van-button type="default" @click="changePersonalImg">确认修改</van-button>

      <div class="userName">{{personInformation.userName}}</div>
    </div>
    <!-- <router-link to="/personSetUp">个人设置页面啊</router-link> -->
    <van-cell title="个人信息" is-link to="/personSetUp" />
    <!-- <van-cell title="修改个人信息" is-link to="/personSetUp" /> -->
    <van-cell title="收获地址设置" is-link to="/myAddres" />
    <van-cell title="我的订单" is-link to="/MyOrderForm" />

    <van-button class="logoutButton" plain type="danger" @click="toLogin">退出登录</van-button>
    <!-- <router-link to="/login">登录页面</router-link> -->
    <!-- <router-link to='/registry'>注册页面</router-link> -->
    <div>{{this.$store.state.test}}</div>
  </div>
</template>
<script>
import MyNavcomponent from "../../components/personal/MyNavcomponent";
import { getPersonInformation } from "../../api/shop-api/shop-api";
import { logOut } from "../../api/shop-api/shop-api";
import { changeAvtar } from "../../api/shop-api/shop-api";
import { Toast } from "vant";
// import Vue from 'vue';
// import { Dialog } from 'vant';
export default {
  name: "Personal",
  data() {
    return {
      personInformation: {
        
      },
      file: ""
    };
  },
  created() {
    getPersonInformation()
      .then(res => {
        console.log(res.data);
        this.personInformation = res.data;
      })
      .catch();
  },
  methods: {
    toLogin() {
      logOut()
        .then( ()=>{
            Toast("退出登录成功")
             this.$router.push("/home"); // 退出登录后默认跳转的路由

        }
        
          
          )
        .catch();
    },
    avatarAfterRead(file) {
      this.file = file;
      console.log(file);
    },
    changePersonalImg(event) {
      event.preventDefault();
      let formData = new FormData();
      formData.append("avatarfile", this.file.file);
      // formData.append("fileUseForEnum", "SHOP");
      changeAvtar(formData).then(res => {
        console.log(res);
      });
    }
  },
  components: {
    MyNavcomponent
  }
};
</script>
<style scoped>
.personalImg {
  width: 100%;
  /* padding: 15px; */
  padding-top: 15px;
  text-align: center;
}
.personalImg img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.userName {
  font-size: 24px;
  margin-top: 15px;
}
.logoutButton {
  position: relative;
  bottom: -30px;
  left: 36%;
}
</style>